import { defineComponent, nextTick, ref } from "vue";
import util from "@/libs/util";
import getColumns from "./columns";
import PermissionBtn from "@/components/permission-btn";
import { Card } from "view-ui-plus";
import {
  useCreateTable,
  useEditTable,
  useRowSelect,
  useTableList,
} from "@/hooks";
import { getPage, onSave } from "@/api/baseData/projectName";
import Modal from "./components/modal";
import Styles from "./index.module.less";

export default defineComponent({
  components: { PermissionBtn },
  setup() {
    // ref
    const standardIcrud = ref<HTMLElement>();
    // option配置
    const iCrudOptions = util.env.iCrudOptions;
    // 列表数据
    const list = ref<any>([]);

    const modelType = ref("Modal");

    const visible = ref(false);

    const columns = getColumns();
    // 列表配置
    const columnsTable = ref(columns);
    // 跨页多选
    const selectionRowOptions = {
      selectKey: "id", // 跨页多选的参考字段，数据唯一
      batchRemove: util.env.iCrudOptions.selectionRowOptions.batchRemove, //删除按钮样式
    };

    const currentRow = ref({});

    const { selectItems, setCheckedItem } = useRowSelect();

    const { getApiTableList, total } = useTableList(getPage, list);

    const { createTableApi } = useCreateTable(onSave);

    const { editTableApi } = useEditTable(currentRow, onSave, (params) => {
      const columns = getColumns();
      columnsTable.value = columns;
      return params;
    });

    // 删除操作
    const deleteTableApi = () => {
      return new Promise((resolve, reject) => {});
    };
    // 多选删除
    const delMultipleTableApi = (selectRow) => {
      return new Promise((resolve, reject) => {});
    };

    // 编辑按钮
    const handleShowEditDialog = (row: any, column: any, index: number) => {
      modelType.value = "Modal";
      currentRow.value = row;
      const columns = getColumns(row.id);
      columnsTable.value = columns;
      nextTick(() => {
        const icrudRefs: any = standardIcrud.value;
        icrudRefs.handleShowEditDialog({ row, column, index });
      });
    };
    // 删除按钮
    const handleShowRemoveDialog = (row: any, column: any, index: number) => {
      const icrudRefs: any = standardIcrud.value;
      icrudRefs.handleShowRemoveDialog({ row, column, index });
    };

    const handleShowViewDialog = (row, column, index) => {
      modelType.value = "Drawer";
      const icrudRefs: any = standardIcrud.value;
      icrudRefs.handleShowViewDialog({ row, column, index });
    };

    const loadPage = () => {
      const icrudRefs: any = standardIcrud.value;
      icrudRefs.handleFetchData();
    };

    const operOptions = ({ row, column, index }) => {
      return (
        <span>
          <PermissionBtn
            title="修改"
            btn-info={{ icon: "md-create" }}
            type="text"
            authority="lab:labInspectionProjectName:edit"
            isDivider={false}
            onClick={() => handleShowEditDialog(row, column, index)}
          />
          <PermissionBtn
            title="查看"
            btn-info={{ icon: "md-eye" }}
            authority="lab:labInspectionProjectName:view"
            type="text"
            onClick={() => handleShowViewDialog(row, column, index)}
          />
        </span>
      );
    };

    const actions = () => {
      const btns = [
        {
          title: "新增",
          btnInfo: { icon: "md-add", type: "primary" },
          type: "button",
          authority: "lab:labInspectionProjectName:edit",
          style: { marginLeft: "10px" },
          onClick: () => {
            visible.value = true;
          },
        },
      ];

      return (
        <span>
          {btns.map((btn: any, i) => {
            return (
              <PermissionBtn key={i} {...btn} selectItems={selectItems.value} />
            );
          })}
        </span>
      );
    };

    //刷新数据
    return () => {
      return (
        <div class={Styles.projectName}>
          <Card
            bordered={false}
            padding={0}
            dis-hover
            class="ivu-mt ivu-pb30 my-iCrud-container"
            ref="card"
          >
            <i-crud
              ref={standardIcrud}
              form-options={{
                ...iCrudOptions.formOptions,
                labelWidth: 100,
                type: modelType.value,
                dialog: {
                  draggable: true,
                  sticky: true,
                  "reset-drag-position": true,
                  styles: { top: "200px" },
                },
              }}
              page-options={{ ...iCrudOptions.pageOptions, total: total.value }}
              search-options={iCrudOptions.searchOptions}
              border={iCrudOptions.border}
              selection-row={selectionRowOptions}
              data={list.value}
              columns={columnsTable.value}
              fetch-data={getApiTableList}
              fetch-create={createTableApi}
              fetch-edit={editTableApi}
              fetch-remove={deleteTableApi}
              fetch-batch-remove={delMultipleTableApi}
              onOnSelectionChange={setCheckedItem}
              addFormOptions={{
                show: false,
              }}
              v-slots={{ operOptions: operOptions, actions }}
            ></i-crud>
            <Modal v-model={visible.value} onChange={loadPage} />
          </Card>
        </div>
      );
    };
  },
});
